<template>
  <el-card class="announcement-box">
    <div slot="header" class="clearfix" style="display: flex; justify-content: space-between; align-items: center;">
      <span>社区公告</span>
      <el-button style="padding: 3px 0" type="text">查看更多</el-button>
    </div>
    <div class="announcement-container">
      <div class="announcement-content">
        <div class="announcement-item" v-for="(item, index) in announcements" :key="index">
          <div class="title">{{ item.title }}</div>
          <div class="content">{{ item.content }}</div>
          <div class="time">{{ item.time }}</div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      announcements: [
        {
          title: '社区停水通知',
          content: '因管道维修，7月16日 9:00-17:00 停水，请提前做好准备。',
          time: '2023-07-14'
        },
        {
          title: '垃圾分类宣传',
          content: '请居民们按照分类要求投放垃圾，共同维护社区环境。',
          time: '2023-07-13'
        }
      ]
    };
  }
};
</script>

<style scoped>
.announcement-box {
  margin-bottom: 20px;
  height: 200px; /* 设置固定高度 */
  overflow: hidden;
  position: relative;
}

.announcement-container {
  height: 100%;
  overflow: hidden;
}

.announcement-content {
  animation: scroll 20s linear infinite; /* 调整滚动速度 */
}

.announcement-item {
  padding: 10px;
  margin-bottom: 10px;
}

@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%); /* 仅滚动到一半 */
  }
}
</style>